<template>
  <BasicModal title="查询并选择客户单位" @register="registerModal"
    :width="400" :canFullscreen="false" :centered="true" :destroyOnClose="true"
    :showCancelBtn="false" :showOkBtn="false" 
    :bodyStyle="{height:'calc(100vh - 300px)', overflow:'hidden'}"
  >
    <div style="zoom: 1; padding: 5px;" :style="{height:'calc(100vh - 300px)', overflowY:'auto'}" >
      <!--  搜索 模块 -->
      <div class="box-search box-search2">
        <div class="search-con">
          <a-input-search
            placeholder="请输入单位名称"
            enter-button="查找"
            @search="doSearch"
            allowClear
          />
        </div>
      </div>
      <ul class="cf t-corpname">
        <li v-for="(value, key) in searchs.result" :key="key" @click="setSearch(value)">
          <a href="javascript:void(0)" :title='value.pathName'> {{(key < 9) ? ("0" + (key + 1)) : (key + 1)}}
            {{value.pathName}} 
          </a>
        </li>
      </ul>
    </div>
  </BasicModal>
</template>

<script lang="ts" name="BankModal" setup>
import { ref, computed, unref, reactive, onMounted, nextTick } from 'vue';
import { BasicModal, useModalInner } from "/@/components/Modal";
import { useMessage } from "/@/hooks/web/useMessage";
import { searchCustomer } from '/@/views/weixin/member/member.api';
const $message = useMessage();

// 声明Emits
const emit = defineEmits(['success', 'register', 'setSearch']);

const searchs  = reactive<any>({ result: [] });

//表单赋值
const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
  //console.info("registerModal@@", data);
});

/**
 * 执行查询,
 */
function doSearch(value: string) {
  console.info(value);
  if (!value) {
    return false
  }
  let params = {
    name: value
  }
  searchCustomer(params).then(resp => {
    console.info(resp)
    searchs.result = []
    if (resp.success) {
      searchs.result = resp.result
    } else {

    }
    //console.info(this.searchs.result)
  })
}
  
function setSearch(item) {
  emit('setSearch', item);
  closeModal();
}

</script>

<style lang="less" scoped>
:deep(.ant-upload.ant-upload-select-picture-card) {
  width: 360px!important
}

:deep(.ant-input-search .ant-input-search-button) {
  height: 27px;
}

.search-con {
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  display: table;
  background-color: #ebeced;
  border-bottom: 1px #dcdcdc solid;
}

.t-corpname {
  min-height: 540px;
  font-size: 15px;
  background-color: #ebeced;
}

.t-corpname li {
  border-bottom: 1px #dcdcdc solid;
}

.t-corpname li:nth-of-type(odd) {
  background: #e3e3e3;
}

.t-corpname li:nth-of-type(even) {
  background: #f1f1f1;
}

.t-corpname li a {
  width: 90%;
  color: #242424;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding-left: 8px;
  line-height: 35px;
}

.t-corpname li .content {
  width: 100%;
  color: #242424;
  padding-left: 30px;
  text-indent: -20px; 
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; 
  overflow: hidden; /* 隐藏超出的内容 */
  text-overflow: ellipsis; /* 用省略号“...”表示被修剪的文本 */
  word-wrap: break-word; /* 防止长单词或URL地址无法换行 */
}
</style>
